<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="keywords"
          content="{$_G['companyname']},{$_G['companyname_short']}微营销,微团,微客,微分销,我要代言,拼多多,{$_G['companyname_short']}投票,微信公众平台,公众平台二次开发,公众平台开源软件,青岛{$_G['companyname_short']}"/>
    <meta name="description" content="{$_G['companyname_short']}·微信营销专家"/>
    <title>{$_G['WebTitle']}</title>
    <link rel="stylesheet" type="text/css"
          href="{$_G['url_scheme']}css2020.yixuan.net/2020css/yixuan_net/css/swiper-3.4.2.min.css"/>
    <style type="text/css" media="all">
        @charset "utf-8";
        /*通用样式*/
        html, body, div, span, iframe, map, font, img, a img, samp, strong, hr, h1, h2, h3, h4, h5, h6, b, p, blockquote, a, address, code, dl, dt, dd, ol, ul, li, form, label, table, tr, td, th {
            padding: 0;
            margin: 0;
            border: 0;
            font-weight: normal;
            font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
            list-style: none;
        }

        html, body {
            position: relative;
            height: 100%;
        }

        body {
            background: #fff;
            font: normal 12px/22px "微软雅黑";
        }

        img {
            border: 0;
        }

        a {
            text-decoration: none;
            color: #000;
        }

        a:hover {
            color: red;
        }

        .clear {
            clear: both;
        }

        .clearfix {
            zoom: 1;
        }

        .clearfix:after {
            content: '\20';
            display: block;
            height: 0;
            clear: both;
        }

        div {
            box-sizing: border-box;
        }

        /* CSS Document */
        .homeCont {
            background: url({$home_img}) center no-repeat;
            width: 100%;
            height: 100vh;
            background-size: cover;
        }

        .loginCont {
            position: absolute;
            right: 15%;
            top: 50%;
            transform: translateY(-50%);
            width: 400px;
            min-height: 478px;
            padding: 50px 40px 22px 40px;
            background: #fff;
            box-shadow: 0 10px 20px 0 rgb(0 0 0 / 20%);
            box-sizing: border-box;
            border-radius: 6px;
        }

        .loginCont:after {
            content: '';
            position: absolute;
            left: 40px;
            height: 3px;
            width: 60px;
            background: #2d76e2;
            top: 0;
        }

        .loginCont h2 {
            display: block;
            line-height: 32px;
            font-size: 22px;
            color: #057feb;
            width: 100%;
            position: relative;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-weight: bold;
            position: relative;
            margin-top: 16px;
            margin-bottom: 36px;
            height: 32px;
        }

        .loginCont h3 {
            font-size: 18px;
            color: #414b55;
            line-height: 28px;
            margin-bottom: 22px;
        }

        .loginCont input {
            flex: 1 1 auto;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            line-height: 24px;
            font-size: 15px;
            outline: 0;
            border: 0;
            padding: 12px 0px 14px 0px;
            margin-right: 12px;
        }

        .login-btn {
            position: absolute;
            width: 72px;
            height: 72px;
            top: 320px;
            right: -36px;
            border-radius: 50%;
            background-color: #057feb;
            box-shadow: 0 5px 14px 0 rgb(5 127 235 / 34%);
            cursor: pointer;
            z-index: 10;
        }

        .login-spinner {
            margin: auto;
            height: 34px;
            width: 34px;
            stroke: #fff;
        }

        .login-spinner .login-spinner-g {
            transform-origin: center;
            animation: rotation 1.35s linear infinite;
        }

        .login-btn-mobile .login-btn-spinner-wrapper, .login-btn .login-btn-spinner-wrapper {
            display: flex;
            position: absolute;
            height: 100%;
            width: 100%;
            z-index: 1;
            opacity: 0;
            transition: opacity .5s;
        }

        .login-btn .login-btn-animation {
            position: absolute;
            top: 0;
            width: 72px;
            height: 72px;
            border-radius: 36px;
            background-color: #057feb;
        }

        .login-btn .grow-bg {
            position: absolute;
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background-color: #057feb;
        }

        .login-btn .login-btn-animation.animation-active {
            -webkit-animation-name: btnPulse;
            -moz-animation-name: btnPulse;
            -ms-animation-name: btnPulse;
            animation-name: btnPulse;
            -webkit-animation-duration: 2s;
            -moz-animation-duration: 2s;
            -ms-animation-duration: 2s;
            animation-duration: 2s;
            -webkit-animation-delay: 3s;
            -moz-animation-delay: 3s;
            -ms-animation-delay: 3s;
            animation-delay: 3s;
            -webkit-animation-iteration-count: infinite;
            -moz-animation-iteration-count: infinite;
            -ms-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-play-state: running;
            -moz-animation-play-state: running;
            -ms-animation-play-state: running;
            animation-play-state: running;
        }

        .login-btn .arrow {
            width: 38px;
            height: 22px;
            position: absolute;
            top: 25px;
            left: 17px;
            background-image: url(http://css2020.yixuan.net/2020css/yx2020/images/run.png);
            background-size: 38px 22px;
            opacity: 1;
            transition: opacity .5s;
        }

        .login-spinner .login-spinner-circle {
            fill: none;
            stroke-linecap: round;
            stroke-dasharray: 180;
            stroke-dashoffset: 0;
            transform-origin: center;
            animation: turn 1.35s ease-in-out infinite;
        }

        @keyframes rotation {
            0% {
                transform: rotate(0deg)
            }
            100% {
                transform: rotate(270deg)
            }
        }

        @keyframes turn {
            0% {
                stroke-dashoffset: 170
            }
            50% {
                stroke-dashoffset: 45;
                transform: rotate(135deg)
            }
            100% {
                stroke-dashoffset: 170;
                transform: rotate(450deg)
            }
        }

        .errorNotice {
            display: none;
            background: rgba(230, 64, 64, .1);
            color: #e64040;
            padding: 8px 8px 8px 14px;
            margin-top: 20px;
        }

        .login-btn.act .login-btn-spinner-wrapper {
            opacity: 1;
        }

        .login-btn.act .arrow {
            opacity: 0;
        }

        .focuseInp {
            position: relative;
        }

        .focuseInp:after {
            transition: all .5s;
            content: '';
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: rgba(48, 56, 78, .1);
        }

        .focuseInp.cur::after {
            height: 2px;
            background: #057feb;
        }

        @media screen and (max-width: 750px) {
            .loginCont {
                padding: 40px 4%;
                height: auto;
                max-width: 92%;
                left: 50%;
                top: 20%;
                transform: translate(-50%);
            }

            .login-btn {
                position: relative;
                margin: 40px auto 0;
                top: 0;
                right: 0;
            }

            .loginCont input {
                font-size: 18px;
            }

            .enter {
                width: 60px;
                height: 60px;
                background-size: 50% auto;
                position: static;
                margin: 0 auto;
            }
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            box-shadow: 0 0 0 100px white inset;
        }
    </style>
</head>
<body>
<div class="homeCont">
    <div class="loginCont">
        <h2>{$_G['companyname']}</h2>
        <h3>登录</h3>
        <div class="focuseInp" id='username_f'>
            <input type="text" placeholder="用户帐号" id="username" name="username"/>
        </div>
        <div class="focuseInp">
            <input type="password" id="password" name="password" placeholder="密码"/>
        </div>
        <input name="__token__" value="{$Request.token}" id="token" type="hidden"/>
        <div class="errorNotice">
            所输入之帐号或密码错误，请再输入一次。
        </div>
        <div role="button" class="login-btn" id="login-btn-new">
            <div class="login-btn-spinner-wrapper">
                <svg viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg" class="login-spinner login-btn-spinner">
                    <g class="login-spinner-g">
                        <circle cx="33" cy="33" stroke-width="5" r="30.5" class="login-spinner-circle"></circle>
                    </g>
                </svg>
            </div>
            <div class="login-btn-animation animation-active"></div>
            <div class="grow-bg"
                 style="height: 2826px; width: 2826px; top: -1377px; left: -1377px; transform: scale(0.0127389);"></div>
            <div class="arrow">
            </div>
        </div>
    </div>
</div>
</body>
<script src="{$_G['url_scheme']}css2020.yixuan.net/2020css/yixuan_net/js/swiper.min.js" type="text/javascript"></script>
<script src="{$_G['url_scheme']}css2020.yixuan.net/2020css/yixuan_net/js/jquery.min.js" type="text/javascript"></script>
<script>
    document.getElementById('username').focus();
    document.getElementById('username_f').setAttribute("class", "focuseInp cur");
    document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'
    window.onresize = function () {
        document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth / 7.5 + 'px'
    }
    $('#login-btn-new').click(function () {
        $('.errorNotice').html('');
        $('.errorNotice').hide();
        if (!$('#username').val()) {
            $('.errorNotice').html('请输入账号');
            $('.errorNotice').show();
            return false;
        }

        if (!$('#password').val()) {
            $('.errorNotice').html('请输入密码');
            $('.errorNotice').show();
            return false;
        }

        $('.login-btn').addClass('act');
        var username = $("#username").val();
        var password = $("#password").val();
        var token = $("#token").val();
        var postUrl = "{$post_url}";
        $.ajax({
            url: postUrl,
            dataType: 'json',
            method: 'post',
            data: {username: username, password: password, token: token, login_type: 'system', submit: '登录',},
            success: function (e) {
                let code = e.code;
                if (code == 1) {
                    let res = e.data;
                    if (res.redirect == './login.php') {
                        res.redirect = '/web/index.php?c=module&a=display&';
                    }
                    window.location.href = res.redirect;
                } else {
                    $('.errorNotice').html(e.msg);
                    $('.errorNotice').show();
                }
                $('.login-btn').removeClass('act');
            },
            fail: function (err) {
                $('.login-btn').removeClass('act');
                $('.errorNotice').show();
            }
        });
    });

    $('.loginCont input').focus(function () {
        $(this).parent().addClass('cur');
    })

    $('.loginCont input').blur(function () {
        $(this).parent().removeClass('cur');
    })
</script>
</html>
